<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="补贴单号">
                            <el-input v-model="form.applySn"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="流水单号">
                            <el-input v-model="form.orderSn"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名/手机号">
                            <el-input v-model="form.userInfo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核状态">
                            <el-select placeholder="请选择" v-model="form.applyStatus">
                                <el-option
                                    v-for="item in applyOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="补贴类型">
                            <el-select placeholder="请选择" v-model="form.allowanceType">
                                <el-option
                                    v-for="item in allowOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="报单时间">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="createdAt"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="初审时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="firstTime"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="复审时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="applyTime"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    label="单号"
                >
                    <template slot-scope="scope"> 
                        <div>
                            补贴单号：{{scope.row.applySn}}
                        </div>
                        <div>
                            流水单号：{{scope.row.orderSn}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="userInfo"
                    label="用户信息"
                >
                </el-table-column>
                <el-table-column
                    label="推荐人"
                >
                    <template slot-scope="scope"> 
                        <div>
                            补贴单：{{scope.row.applyServerInfo}}
                        </div>
                        <div>
                            流水单：{{scope.row.orderServerInfo}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="projectName"
                    label="医院项目"
                >
                </el-table-column>
                <el-table-column
                    prop="totalMoney"
                    label="消费金额"
                >
                </el-table-column>
                <el-table-column
                    prop="teamUserName"
                    label="团队"
                >
                </el-table-column>
                <el-table-column
                    prop="applyStatus"
                    label="审核状态"
                >
                </el-table-column>
                <el-table-column
                    prop="isBx"
                    label="是否购买保险"
                >
                </el-table-column>
                <el-table-column
                    prop="butlerName"
                    label="管家"
                >
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    label="创建时间"
                >
                </el-table-column>
                <el-table-column
                    prop="identity"
                    label="审核时间"
                >
                    <template slot-scope="scope"> 
                        <div>
                            初审时间：{{scope.row.firstTime}}
                        </div>
                        <div>
                            复审时间：{{scope.row.applyTime }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                >
                <template slot-scope="scope">
                    <div>
                        <!-- 按钮显影 -->
                        <!-- 未签名 -->
                        <div v-if="scope.row.applyStatus=='未签名'">
                            <el-button type="text" size="small">驳回</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageInfo',scope.row.id)" size="small">详情</el-button>
                        </div>
                        <!-- 未审核 -->
                        <div v-if="scope.row.applyStatus=='未审核'">
                            <el-button type="text" @click="toRoutes('subsidyManageTrial',scope.row.id)" size="small">初审</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageEdit',scope.row.id)" size="small">编辑</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageInfo',scope.row.id)" size="small">详情</el-button>
                            <el-button type="text" size="small">暂停</el-button>
                        </div>
                        <!-- 初审通过 -->
                        <div v-if="scope.row.applyStatus=='初审通过'">
                            <el-button type="text" @click="toRoutes('subsidyManageRecheck',scope.row.id)" size="small">复审</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageEdit',scope.row.id)" size="small">编辑</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageInfo',scope.row.id)" size="small">详情</el-button>
                            <el-button type="text" size="small">暂停</el-button>
                            <el-button type="text" size="small">协议</el-button>
                        </div>
                        <!-- 复审通过 -->
                        <div v-if="scope.row.applyStatus=='复审通过'">
                            <el-button type="text" @click="toRoutes('subsidyManageRefund',scope.row.id)" size="small">退款</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageInstallment',scope.row.id)" size="small">分期</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageEdit',scope.row.id)" size="small">编辑</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageInfo',scope.row.id)" size="small">详情</el-button>
                            <el-button type="text" size="small">暂停</el-button>
                            <el-button type="text" size="small">协议</el-button>
                        </div>
                        <!-- 初审驳回 -->
                        <div v-if="scope.row.applyStatus=='初审驳回'">
                            <el-button type="text" @click="toRoutes('subsidyManageEdit',scope.row.id)" size="small">编辑</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageInfo',scope.row.id)" size="small">详情</el-button>
                        </div>
                        <!-- 复审驳回 -->
                        <div v-if="scope.row.applyStatus=='复审驳回'">
                            <el-button type="text" @click="toRoutes('subsidyManageEdit',scope.row.id)" size="small">编辑</el-button>
                            <el-button type="text" @click="toRoutes('subsidyManageInfo',scope.row.id)" size="small">详情</el-button>
                        </div>
                    </div>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listForm.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="listForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// allowanceListDelete
import { allowanceList } from '@/api/subsidyManage'

export default {
    name:"subsidyManageIndex",
    data(){
        return{
            val:"1",
            dates:"",
            applyOption:[],
            allowOption:[],
            createdAt:null,
            firstTime:null,
            applyTime:null,
            tableLoading:true,
            form:{
                applySn:null,
                orderSn:null,
                userInfo:null,
                applyStatus:null,
                allowanceType:null,
                createdAtBegin:null,
                createdAtEnd:null,
                firstTimeBegin:null,
                firstTimeEnd:null,
                applyTimeBegin:null,
                applyTimeEnd:null,

                pageNum:1,
                pageSize:10,
            },
            tableData: [],
            page_sizes:[10,30,50,100],
            page_totals:60,
            listForm:{
                pageNum:1,
                pageSize:10,
            },
        }
    },
    filters:{
        cardType: function(e){
            return window.helper.cardType(String(e))
        },
    },
    mounted(){
        this.getList(this.listForm)
        this.getOption()
    },
    methods:{
        //获取对应options
        getOption(){
            this.applyOption = window.helper.applyStatus("listReturn")
            this.allowOption = window.helper.allowanceType("listReturn")
        },
        //成功状态弹窗
        succStatus(txt){
            this.$message({
                message: txt+'成功',
                type: 'success'
            });
        },
        //失败状态弹窗
        errorStatus(txt){
            this.$message.error(txt+'失败');
        },
        // 查询
        searchFn() {
            if(this.createdAt!=null){
                if(this.createdAt.length){
                    this.form.createdAtBegin = this.createdAt[0];
                    this.form.createdAtEnd = this.createdAt[1];
                }
            }else{
                this.form.createdAtBegin = "";
                this.form.createdAtEnd = "";
            }
            if(this.firstTime!=null){
                if(this.firstTime.length){
                    this.form.firstTimeBegin = this.firstTime[0];
                    this.form.firstTimeEnd = this.firstTime[1];
                }
            }else{
                this.form.firstTimeBegin = "";
                this.form.firstTimeEnd = "";
            }
            if(this.applyTime!=null){
                if(this.applyTime.length){
                    this.form.applyTimeBegin = this.applyTime[0];
                    this.form.applyTimeEnd = this.applyTime[1];
                }
            }else{
                this.form.applyTimeBegin = "";
                this.form.applyTimeEnd = "";
            }
            this.getList(this.form)
            // console.log(JSON.stringify(this.form))
            // console.log(this.form)
        },
        //列表数据获取
        getList(e){
            this.tableLoading = true
            let datas = e
            allowanceList(datas).then(res => {
                if(!res.data.code){
                    console.log(res)
                    this.tableData = res.data.data.list
                    this.page_totals = res.data.data.count
                }else{
                    this.$message.error("数据接口访问失败");
                }
                this.tableLoading = false
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        // 路由跳转
        toRoutes(e,id) {
            let route = {name:e,query:{userId:id}}
            this.$router.push(route)
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val
            this.getList(this.form)
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.getList(this.form)
        },
        // 删除
        deleteList(e){
            let datas = {id:e}
            console.log(datas)
            this.$confirm('删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(datas)
                allowanceListDelete(datas).then(res =>{
                    if(!res.data.code){
                        this.succStatus("删除")
                        this.getList(this.form)
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    }
}
</script>
<style scoped>
/* 分页 */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
</style>
